<!DOCTYPE html>
<!-- ng-app -->
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../../../js/plugins/angular/angular.min.js" type="text/javascript"></script>
    <script src="../../../js/plugins/angular/angular-route.min.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <a href="#/">首页</a>
        <a href="#/book">图书</a>
        <a href="#/game">游戏</a>
    </div>
    <!-- ng-view作为装载不同模板的容器，所有切换后的都在该容器中展示 -->
    <div ng-view></div>

    <script>
        var app = angular.module('app',['ngRoute']);
        app.controller('index',['$scope',function ($scope) {
            $scope.title = '这是首页';
        }]);
        app.controller('book',['$scope',function ($scope) {
            $scope.title = '这是图书页';
        }]);
        app.controller('game',['$scope',function ($scope) {
            $scope.title = '这是游戏页';
        }]);

        app.config(['$routeProvider',function ($routeProvider) {
            $routeProvider
                .when('/',{
                    controller:'index',
                    template:"<div class='show'>{{title}}</div>"
                })
                .when('/book',{
                    controller:'book',
                    template:"<div class='show'>{{title}}</div>"
                })
                .when('/game',{
                    controller:'game',
                    template:"<div class='show'>{{title}}</div>"
                })
                .otherwise({
                    /* 没有匹配到，调到index */
                    redirectTo:'/'
                })
        }])
    </script>
</body>
</html>